<template>
  <div class="box">
    <h1 class="fs-30">B组件,{{n}}</h1>
    <!-- 方法1:在组件内过滤数据，复用性不太好 -->
    <!-- <ul>
      <li v-for="(item,index) in goodsList" :key="index">
        名称:{{item.name}}
        价格:{{item.price}} 元
        数量:{{item.n}} 个
      </li>
    </ul> -->
    <!-- 方法2: 在getters处理后提供给组件使用，复用性更好 -->
    <ul>
      <li v-for="(item,index) in filterList" :key="index">
        名称:{{item.name}}
        价格:{{item.price}} 元
        数量:{{item.n}} 个
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    computed: {
      n() {
        return this.$store.state.count.num 
      },
      goodsList(){ //将state处理后再使用
        return this.$store.state.goodsList.filter(item=>{
          return item.price>250
        })
      },
      filterList(){ //提取getters并使用
        return this.$store.getters['goods/filterGoodsList']
      }
    },
  }
</script>

<style lang="less" scoped>
.box{
  height: 300px;
  border: 1px solid #333;
}
</style>